<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap DataGrid</title>
<!-- Bootstrap -->
<link href="assets/bootstrap-3.4.1/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/common/css/style.css" rel="stylesheet">
<link href="assets/google-code-prettify/prettify.css" type="text/css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="assets/common/js/html5shiv.min.js"></script>
<script src="assets/common/js/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="assets/favicon.ico">
</head>
<body onload="prettyPrint()">
	<!-- Navigation -->
	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		<div class="container">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="https://github.com/tylanbin/twbs-datagrid">Bootstrap DataGrid</a>
			</div>
			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav">
					<li><a href="#example">Example</a></li>
					<li><a href="#required">Required</a></li>
					<li><a href="#howto">How to</a></li>
					<li><a href="#options">Options</a></li>
					<li><a href="#methods">Methods</a></li>
					<li><a href="https://github.com/tylanbin/twbs-datagrid" target="_blank">Source</a></li>
				</ul>
			</div>
			<!-- /.navbar-collapse -->
		</div>
		<!-- /.container -->
	</nav>
	
	<!-- Page Content -->
	<div class="container">

		<!-- Jumbotron Header -->
		<header class="jumbotron hero-spacer">
			<h1>Bootstrap DataGrid</h1>
			<p style="text-indent:2em;">Bootstrap DataGrid is a simple tool used to display data with Bootstrap. It is easy tou use, just like jQuery EasyUI Datagrid, but only have some simple params.</p>
		</header>

		<div id="example" style="padding-top: 40px;" class="row">
			<div class="col-lg-12">
				<h3>Example</h3>
			</div>
		</div>
		<div class="row" style="padding-bottom: 15px;">
			<div class="col-md-12">
				<button type="button" class="btn btn-primary" onclick="func_reload()">Reload</button>
				<button type="button" class="btn btn-warning" onclick="func_getopt()">GetOptions</button>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<table id="datagrid" class="table table-striped table-bordered bootstrap-datatable datatable responsive"></table>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12" style="text-align: right;">
				<ul id="pag" class="pagination"></ul>
			</div>
		</div>
		
		<div id="required" style="padding-top: 40px;" class="row">
			<div class="col-lg-12">
				<h3>Required</h3>
			</div>
		</div>
		<div class="row" style="padding-bottom: 15px;">
			<div class="col-md-12">
				<ol>
					<li>jQuery</li>
					<li>Bootstrap v3</li>
					<li><a href="https://github.com/esimakin/twbs-pagination" target="_blank">jQuery pagination plugin</a></li>
				</ol>
			</div>
		</div>

		<div id="howto" style="padding-top: 40px;" class="row">
			<div class="col-lg-12">
				<h3>How to</h3>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<ol>
					<li>
						Use simple HTML at your html (jsp, php) page (you can change styles as you want).
<pre style="margin-top:8px;" class="prettyprint">
&lt;div class="row"&gt;
    &lt;div class="col-md-12"&gt;
        &lt;table id="datagrid" class="table table-striped table-bordered bootstrap-datatable datatable responsive"&gt;&lt;/table&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="row"&gt;
    &lt;div class="col-md-12" style="text-align: right;"&gt;
        &lt;ul id="dg-pagination" class="pagination"&gt;&lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;
</pre>
					</li>
					<li>
						Use js code to init it.
<pre style="margin-top:8px;" class="prettyprint">
$('#datagrid').twbsDatagrid({
    url : 'data.json',		// request url
    columns : [{
        field : 'username',	// json object key
        title : 'Username'	// datagrid column name
    }, {
        field : 'role',
        title : 'Role'
    }]
});
</pre>
					</li>
					<li>
						data.json just like this.
<pre style="margin-top:8px;" class="prettyprint">
{
    "total" : 18,
    "datas" : [
        { "userName" : "zhangsan", "regDate" : "", "role" : "Admin" },
        { "userName" : "lisi", "regDate" : "", "role" : "Staff" },
        { "userName" : "wangwu", "regDate" : "", "role" : "Staff" },
        { "userName" : "zhaoliu", "regDate" : "", "role" : "Staff" },
        { "userName" : "sunqi", "regDate" : "", "role" : "Staff" }
    ]
}
</pre>
					</li>
					<li>
						You can change the pagination ul id, if it changes, you must config it when datagrid init
<pre style="margin-top:8px;" class="prettyprint">
&lt;ul id="pag" class="pagination"&gt;&lt;/ul&gt;
</pre>
					</li>
					<li>
						It will send 3 default params: <code>page</code>, <code>rows</code>, <code>params</code>.
						<ul style="margin: 8px 0;">
							<li><code>page</code>: integer, means current page number.</li>
							<li><code>rows</code>: integer, means current page size.</li>
							<li><code>params</code>: string, like this <code>{ "testParam" : "test" }</code></li>
						</ul>
					</li>
					<li>
						Java example:
<pre style="margin-top:8px;" class="prettyprint">
@ResponseBody
@RequestMapping(value = "/data")
public String data(int page, int rows, String params) {
    ObjectMapper om = new ObjectMapper();
    try {
        if (!StringUtils.isEmpty(params)) {
            // use jackson to deserialize string to map
            Map&lt;String, Object&gt; map = om.readValue(params, new TypeReference&lt;Map&lt;String, Object&gt;&gt;() {});
            pm = fooService.pagingQuery(page, rows, map);
        } else {
            pm = fooService.pagingQuery(page, rows);
        }
        // serialize result
        Map&lt;String, Object&gt; result = new HashMap&lt;String, Object&gt;();
        result.put("total", pm.getTotal());
        result.put("datas", pm.getDatas());
    } catch (Exception e) {
        e.printStackTrace();
        return "{ \"total\" : 0, \"datas\" : [] }";
    }
}
</pre>
					</li>
				</ol>
			</div>
		</div>
		
		<div id="options" style="padding-top: 40px;" class="row">
			<div class="col-lg-12">
				<h3>Options</h3>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<ol style="list-style: none;">
					<li>
<pre class="prettyprint">
$('#datagrid').twbsDatagrid({
    url : 'data.json',                  // request url (*nessesary)
    pagination : '#dg-pagination',      // pagination plugin id (default: '#dg-pagination')
    pageSize : 10,                      // page size (default: 10)
    params : {},                        // custom params (it will convert to string when send request)
    method : 'post',                    // ajax method, post/get (default: 'post')
    language : {                        // pagination plugin button language
        first : 'First',
        prev : 'Prev',
        next : 'Next',
        last : 'Last'
    }
    columns : [{                        // datagrid columns (*nessesary)
        field : 'username',             // json object key
        title : 'Username'              // datagrid column name
        hidden : true,                  // hide/show this column
        thStyle : 'text-align:center;', // use this into th's style
        tdStyle : 'text-align:center;'  // use this into td's style
    }, {
        field : 'role',
        title : 'Role'
    }, {
        field : 'regDate',
        title : 'Date registered',
        formatter : function(val, row) {
            // this is the custom formatter method
            // val: column value at this row
            // row: object at this row
            alert(new Date(val)); // use column value
            alert(row.toSource()); // use row object
            // you can use this method to return anything you want
            return 'null';
        }
    }]
});
</pre>
					</li>
				</ol>
			</div>
		</div>
		
		<div id="methods" style="padding-top: 40px;" class="row">
			<div class="col-lg-12">
				<h3>Methods</h3>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<ul>
					<li>
					reload (used to reload datagrid data with new params)
<pre style="margin-top:8px;" class="prettyprint">
$('#datagrid').twbsDatagrid('reload', {
    param_1 : 'val',
    param_2 : 111,
    param_3 : 10.08
});
</pre>
					</li>
					<li>
					options (used to get datagrid options)
<pre style="margin-top:8px;" class="prettyprint">
var opts = $('#datagrid').twbsDatagrid('options');
console.log(JSON.stringify(opts))
</pre>
					</li>
				</ul>
			</div>
		</div>

		<!-- Footer -->
		<footer>
			<div class="row">
				<div class="col-lg-12">
					<p>Copyright &copy; <a href="http://tylanbin.tk" target="_blank">tylanbin</a> 2015</p>
				</div>
			</div>
		</footer>
		
		<!-- modal -->
		<div id="modal-opts" class="modal fade" tabindex="-1" role="dialog">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title">Datagrid Options</h4>
					</div>
					<div class="modal-body">
<pre class="prettyprint">
</pre>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
		<!-- /.modal -->
		
	</div>
	<!-- /.container -->
	
	<!-- scripts -->
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="assets/common/js/jquery.min.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="assets/bootstrap-3.4.1/js/bootstrap.min.js"></script>
	<!-- google-code-prettify -->
	<script src="assets/google-code-prettify/prettify.js"></script>
	<!-- bootstrap datagrid plugin -->
	<script src="assets/twbs-pagination-1.4.2/jquery.twbsPagination.min.js"></script>
	<script src="jquery.twbsDatagrid.js"></script>
	<!-- page script -->
	<script type="text/javascript">
		$(function() {
			$('#datagrid').twbsDatagrid({
				pagination : '#pag',
				pageSize : 5,
				url : 'data.json',
				method : 'get',
				columns : [{
					field : 'userName',
					title : 'Username'
				}, {
					field : 'regDate',
					title : 'Date registered'
				}, {
					field : 'role',
					title : 'Role'
				}, {
					field : 'test',
					title : 'Status',
					thStyle : 'text-align:center;width:200px;',
					tdStyle : 'text-align:center;',
					formatter : function(val, row) {
						var html =
							'<a class="btn btn-success btn-xs" href="#">' +
								'<i class="glyphicon glyphicon-zoom-in icon-white"></i> View' +
							'</a>&nbsp;' +
							'<a class="btn btn-info btn-xs" href="#">' +
								'<i class="glyphicon glyphicon-edit icon-white"></i> Edit' +
							'</a>&nbsp' +
							'<a class="btn btn-danger btn-xs" href="#">' +
								'<i class="glyphicon glyphicon-trash icon-white"></i> Delete' +
							'</a>';
						return html;
					}
				}]
			});
		})
		function func_reload() {
			$('#datagrid').twbsDatagrid('reload', {
				test : 123
			});
		}
		function func_getopt() {
			var opts = $('#datagrid').twbsDatagrid('options');
			$('#modal-opts').find('pre').html(JSON.stringify(opts, null, 4));
			$('#modal-opts').modal('show');
		}
	</script>
</body>
</html>